<template>
  <div class="page gray-page leadership">
    <nav-bar title="领导指挥督办" theme="white">
      <template #custom>
        <img
          src="../../../assets/images/cockpit/home/status-bar-search.png"
          class="iconimg"
          alt=""
          @click="leadershipClick"
        />
      </template>
    </nav-bar>
    <div class="list-main page-main" style="margin-top: 44px">
      <van-sticky :offset-top="44">
        <van-tabs v-model="searchForm.basetype" class="van-hairline--bottom" @click="tabList(searchForm.basetype)">
          <van-tab v-for="(item, key) in tabOptions" :key="key" :title="item.description" :name="item.code"></van-tab>
        </van-tabs>
      </van-sticky>
      <van-sticky :offset-top="88" v-if="searchForm.basetype === '1'">
        <!--        <van-tabs v-model="searchForm.isReply" line-height="0" swipe-threshold="3" @click="dubanClick">
          <van-tab v-for="(item, key) in tabOptions[searchForm.isSupervising].children" :key="key" :name="item.code">
            <template #title>
              <van-tag
                v-if="searchForm.isReply === item.code"
                type="primary"
                round
                plain
                size="large"
                style="background-color: rgba(60, 189, 208, 0.1)"
              >
                {{ item.description }}
              </van-tag>
              <van-tag v-else round size="large" text-color="rgba(0, 0, 0, 0.78)" color="#f6f6f6">
                {{ item.description }}
              </van-tag>
            </template>
          </van-tab>
        </van-tabs>-->
        <div class="page-no-box">
          <div
            class="page-noda"
            :class="{ activeLeadr: current == index }"
            v-for="(item, index) in tabOptions[1].children"
            :key="index"
            @click="wsdbl(item, index)"
          >
            {{ item.description }}
          </div>
        </div>
      </van-sticky>
      <van-sticky class="page-scroll" :offset-top="150" v-if="searchForm.basetype === '1'">
        <van-pull-refresh v-model="refreshing" style="min-height: 100%">
          <template v-if="listData.length">
            <van-list
              v-model="loading"
              :finished="finished"
              :immediate-check="false"
              :error.sync="error"
              error-text="请求失败，点击重新加载"
              finished-text="没有更多了~"
              @load="getList"
            >
              <gb-card
                border
                class="list-item"
                v-for="(item, key) in listData"
                :key="key"
                :color="baseColor[searchForm.baseType]"
              >
                <item-template
                  :item="item"
                  :baseType="searchForm.isReply"
                  :queryType="searchForm.isSupervising"
                  type="Record-detail"
                ></item-template>
              </gb-card>
            </van-list>
          </template>
          <template v-else>
            <van-empty
              :image="require('@/assets/images/basic/pic_no_content.png')"
              description="暂无内容~"
              style="height: 300px"
            />
          </template>
        </van-pull-refresh>
      </van-sticky>
      <van-sticky class="page-scroll" :offset-top="100" v-else>
        <van-pull-refresh v-model="refreshing" style="min-height: 100%">
          <template v-if="listData.length">
            <van-list
              v-model="loading"
              :finished="finished"
              :immediate-check="false"
              :error.sync="error"
              error-text="请求失败，点击重新加载"
              finished-text="没有更多了~"
              @load="getList"
            >
              <gb-card
                border
                class="list-item"
                v-for="(item, key) in listData"
                :key="key"
                :color="baseColor[searchForm.baseType]"
              >
                <item-template
                  :item="item"
                  :baseType="searchForm.isReply"
                  :queryType="searchForm.isSupervising"
                  type="Record-detail"
                ></item-template>
              </gb-card>
            </van-list>
          </template>
          <template v-else>
            <van-empty
              :image="require('@/assets/images/basic/pic_no_content.png')"
              description="暂无内容~"
              style="height: 200px"
            />
          </template>
        </van-pull-refresh>
      </van-sticky>
      <div class="linkage-command" @click="$router.push('/cockpit/supervise/linkageCommand')">联动指挥</div>
    </div>
    <van-popup v-model="popUpshow" position="right" :style="{ height: '100%', width: '90%' }">
      <div class="pop-top">
        <p>筛选</p>
        <p @click="emptyClick">清空</p>
      </div>
      <div class="pop-content">
        <van-tabs v-model="popactive">
          <van-tab title="行政区划">
            <van-tree-select
              :style="{ height: '100%' }"
              :items="items"
              :active-id.sync="items.activeId"
              :main-active-index.sync="activeIndex"
              @click-nav="onNavClick"
            >
              <template #content>
                <ul class="right-content">
                  <li v-for="(item, index) in secondarymenuList" :key="index">
                    <p>{{ item.regionName }}</p>
                    <p>{{ item.eventCount }}</p>
                  </li>
                </ul>
              </template>
            </van-tree-select>
          </van-tab>
          <van-tab title="事件条件" class="event-conditions">
            <div class="event-conditions-box">
              <p class="event-status-title">事件状态</p>
              <div class="event-status-box">
                <div
                  class="event-status"
                  :class="{ eventstatusActive: eventStatusIndex === index }"
                  v-for="(item, index) in eventStatusTag"
                  :key="index"
                  @click="eventStatusClick(item, index)"
                >
                  {{ item.description }}
                </div>
              </div>
              <p class="event-status-title">处置部门</p>
              <div class="event-status-box disposal-department">
                <div
                  class="event-status"
                  :class="{ eventTypeActive: eventtypeIndex === index }"
                  v-for="(item, index) in disposaldepartment"
                  :key="index"
                  @click="eventtypeClick(item, index)"
                >
                  {{ item.label }}
                </div>
              </div>
              <p class="event-status-title">上报时间</p>
              <div class="reporting-time">
                <van-field
                  readonly
                  clickable
                  name="expirationData"
                  v-model="searchForm.reportBeginTime"
                  placeholder="请输入开始时间"
                  @click="dateOpenPopup('1')"
                />
                <p>-</p>
                <van-field
                  readonly
                  clickable
                  name="expirationData"
                  v-model="searchForm.reportEndTime"
                  placeholder="请输入结束时间"
                  @click="dateOpenPopup('2')"
                />
              </div>
            </div>
          </van-tab>
        </van-tabs>
      </div>
      <div class="pop-bottom">
        <button @click="emptyClick">清空</button>
        <button @click="determine">确定</button>
      </div>
    </van-popup>
    <!-- 日期 -->
    <van-popup v-model="datePopupShow" round position="bottom" @close="date = new Date()">
      <van-datetime-picker
        v-model="date"
        type="date"
        title="选择年月日"
        @cancel="datePopupShow = false"
        @confirm="dateOnConfirm"
      />
    </van-popup>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import List from '@/mixins/list'
import Cockpit from '@/api/cockpit'
import ItemTemplate from '@/components/Widget/Cockpit/Event/template'
export default {
  name: 'leadership',
  mixins: [List],
  components: {
    ItemTemplate
  },
  data() {
    return {
      tabOptions: {
        1: {
          code: '1',
          description: '已督办事件',
          children: [
            {
              code: '1',
              description: '已回复'
            },
            {
              code: '0',
              description: '未回复'
            },
            {
              code: '3',
              description: '督办超时'
            }
          ]
        },
        2: {
          code: '2',
          description: '未督办事件',
          children: []
        }
      },
      baseColor: {
        1: '#3CBDD0',
        2: '#37C2BB',
        3: '#E28556',
        4: '#E2AB56',
        5: '#E25656',
        6: '#E28556',
        7: '#3B71DA',
        8: '#37C2BB',
        9: '#E2AB56',
        10: '#3B99DA'
      },
      searchForm: {
        isReply: '',
        eventStatus: '',
        communityRegion: '',
        eventType: '',
        reportBeginTime: '',
        reportEndTime: '',
        pageNumber: 1,
        recordSize: 0,
        pageSize: 10,
        regionCode: this.regionCode,
        isSupervising: '0',
        basetype: '2',
        superviseTimeOut: ''
      },
      api: Cockpit.Record,
      current: 0,
      erjiMenu: false, // 督办切换
      popUpshow: false, // 筛选显示
      popactive: 0,
      treeactive: 0,
      items: [],
      eventStatusTag: [],
      disposaldepartment: [],
      currentDate: new Date(2021, 0, 17),
      datePopupShow: false,
      date: '',
      timedivision: '',
      secondarymenu: '', // 二级菜单传参数
      secondarymenuList: [], // 二级菜单数据
      eventStatusIndex: -1, // 事件状态切换
      eventtypeIndex: -1, // 事件类型选中切换class
      activeIndex: 0
    }
  },
  computed: {
    ...mapState({
      user: state => state.userInfo
    })
  },
  created() {
    this.searchForm.regionCode = this.user.regionCode
    if (localStorage.getItem('tabSevle') === '1') {
      this.searchForm.basetype = '1'
      this.searchForm.isReply = '1'
      this.searchForm.isSupervising = '1'
    }
    console.log(this.current + '------')
    this.getList()
    this.adminInit()
  },
  mounted() {
    this.regionCode = this.user.regionCode
  },
  methods: {
    handleLabelClick(item) {
      this.searchForm.baseType = item.code
      // this.getList(1)
    },
    // 督办点击
    wsdbl(item, index) {
      this.current = index
      if (item.code === '1') {
        this.searchForm.isReply = '1'
        this.searchForm.superviseTimeOut = ''
      } else if (item.code === '0') {
        this.searchForm.isReply = '0'
        this.searchForm.superviseTimeOut = ''
      } else {
        this.searchForm.isReply = ''
        this.searchForm.superviseTimeOut = '0'
      }
      this.getList(1)
    },
    // tab切换
    tabList(item) {
      this.searchForm.communityRegion = ''
      this.searchForm.eventType = ''
      this.searchForm.basetype = item
      localStorage.setItem('tabSevle', item) // 将选中的tab缓存起来
      if (item === '2') {
        this.erjiMenu = false
        this.searchForm.isReply = ''
        this.searchForm.superviseTimeOut = ''
        this.searchForm.isSupervising = '0'
        this.searchForm.basetype = '2'
      } else {
        console.log('1')
        this.current = 0
        this.erjiMenu = true
        this.searchForm.superviseTimeOut = ''
        this.searchForm.isReply = '1'
        this.searchForm.isSupervising = '1'
      }
      this.getList(1)
    },
    dateOpenPopup(item) {
      if (item === '1') {
        this.timedivision = 1
      } else {
        this.timedivision = 2
      }
      this.datePopupShow = true
    },
    dateOnConfirm(val) {
      const year = val.getFullYear()
      let month = val.getMonth() + 1
      let day = val.getDate()
      let hour = val.getHours()
      let minute = val.getMinutes()
      if (month >= 1 && month <= 9) {
        month = `0${month}`
      }
      if (day >= 1 && day <= 9) {
        day = `0${day}`
      }
      if (hour >= 0 && hour <= 9) {
        hour = `0${hour}`
      }
      if (minute >= 0 && minute <= 9) {
        minute = `0${minute}`
      }
      if (this.timedivision === 1) {
        this.searchForm.reportBeginTime = `${year}-${month}-${day}`
      } else {
        this.searchForm.reportEndTime = `${year}-${month}-${day}`
      }
      this.datePopupShow = false
    },
    // 选项格式化函数
    formatter(type, value) {
      if (type === 'year') {
        return `${value}年`
      } else if (type === 'month') {
        return `${value}月`
      } else if (type === 'day') {
        return `${value}日`
      } else if (type === 'hour') {
        return `${value}时`
      } else if (type === 'minute') {
        return `${value}分`
      } else if (type === 'second') {
        return `${value}秒`
      }
      return value
    },
    leadershipClick() {
      this.adlmenu()
      this.popUpshow = true
      this.popactive = 0
      this.eventStatusIndex = -1
      this.eventtypeIndex = -1
      this.activeIndex = 0
      this.searchForm.reportBeginTime = ''
      this.searchForm.reportEndTime = ''
    },
    adlmenu() {
      this.items = []
      Cockpit.Online.queryRegion({ regionCode: this.user.regionCode }).then(res => {
        const data = { ...res.data }
        if (data.status === 0) {
          const reversedata = data.data.reverse()
          this.secondarymenu = reversedata[0].regionCode
          this.searchForm.communityRegion = reversedata[0].regionCode
          for (let i = 0; i < reversedata.length; i++) {
            this.items.push({
              activeId: reversedata[i].regionCode,
              text: reversedata[i].regionName
            })
          }
          this.secondarymenuClick()
        } else {
          this.$toast(data.message)
        }
      })
    },
    // 点击左边菜单
    onNavClick(index) {
      const substationCode = this.items[index].activeId
      this.secondarymenu = substationCode
      this.searchForm.communityRegion = substationCode
      this.secondarymenuClick()
    },
    // 二级菜单
    secondarymenuClick() {
      Cockpit.Online.queryRegion({ communityRegion: this.secondarymenu }).then(res => {
        const data = { ...res.data }
        if (data.status === 0) {
          const reversedata = data.data.reverse()
          this.secondarymenuList = reversedata
        } else {
          this.$toast(data.message)
        }
      })
    },
    // 事件状态和一级事件分类的接口
    adminInit() {
      Cockpit.Online.adminInit({}).then(res => {
        const data = { ...res.data }
        if (data.status === 0) {
          this.eventStatusTag = data.data.appQueryEventStatus
          this.disposaldepartment = data.data.eventType
        } else {
          this.$toast(data.message)
        }
      })
    },
    // 清空
    emptyClick() {
      this.searchForm.reportBeginTime = ''
      this.searchForm.reportEndTime = ''
      this.popactive = 0
      this.eventStatusIndex = -1
      this.eventtypeIndex = -1
      this.activeIndex = 0
    },
    // 事件状态点击
    eventStatusClick(item, index) {
      this.eventStatusIndex = index
      this.searchForm.eventStatus = item.code
    },
    // 事件类型点击
    eventtypeClick(item, index) {
      this.eventtypeIndex = index
      this.searchForm.eventType = item.value
    },
    determine() {
      this.searchForm.regionCode = ''
      this.popUpshow = false
      this.getList(1)
    }
  }
}
</script>

<style scoped lang="less">
@import '~@/assets/style/list.less';
@import '~@/assets/style/cockpit/leadership.less';
</style>
